<template>
  <div class="result">
    <div>搜索结果：{{ keywords }}</div>
    <ul>
      <li v-for="(song, index) in result" :key="index">
        <SongItem :item="song" :keywords="keywords" @play="$emit('play',$event)"></SongItem>
      </li>
    </ul>
    <Loading v-if="showLoading"></Loading>
    <p class="loadmore" @click="loadMore">{{moreSongs ? "点击加载更多..." : "已经到底了~"}}</p>
    <div class="footer"></div>
  </div>
</template>
<script>
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";
export default {
  name: "SearchResult",
  props: ["keywords"],
  data() {
    return {
      result: [],
      page: 1,
      showLoading: true,
      moreSongs:true,
      
    };
  },
  created() {
    this.result = [];
    this.loadSearch();
  },
  components: {
    SongItem,
    Loading,
  },
  methods: {
    loadSearch() {
      let offset = (this.page - 1) * 30;
      this.axios
        .get("/search?keywords=" + this.keywords + "&type=1&offset=" + offset)
        .then((data) => {
          if(!data.data.result.songs){
             this.showLoading = false;
             this.moreSongs=false;
          }else{
          this.result = this.result.concat(data.data.result.songs);
          this.showLoading = false;
          this.moreSongs=true;
          this.$root.searchHistory.unshift(this.keywords);
          }
        });
    },
    loadMore() {
      this.page++;
      this.showLoading = true;
      this.loadSearch();
    },
  },
};
</script>
<style lang="less" scoped>
.result {
  padding: 0px 0px;
  p.loadmore {
    background-color: #fff;
    text-align: center;
  }
}
.footer{
  height: 64px;
  width: 100vw;
}
/deep/.playbtn{
  margin-right:8px ;
}
/deep/.left{
  margin-left: 8px;
}
</style>